/**********/
/* global */
/**********/
html {
  font-family: Inter, sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: Inter, sans-serif;
  }
}

a {
  display: inline-block;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  will-change: auto;
  text-decoration: underline;
  color: #47453d;
}

p {
  font-size: @text14;
  line-height: 21px;
  margin-bottom: 20px;
}

p:last-child {
  margin: 0;
}

h2 {
  font-size: @text24;
  font-weight: @fw8;
  color: @homeBackgroundColor;
  text-align: center;
  padding: 50px;
  line-height: 140%;
}

h2 span {
  display: inline-block;
  padding: 0 5px;
  margin: 0 -2px 0 -5px;
  border-radius: 4px;
  background: @homeBackgroundColor;
}
h2 span strong {
  font-weight: @fw8;
  color: #ea652c;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffd801),
    color-stop(35%, #ffd801),
    color-stop(35%, #f5c037),
    color-stop(50%, #f5c037),
    color-stop(50%, #f5a937),
    color-stop(65%, #f5a937),
    color-stop(65%, #ea652c),
    to(#ea652c)
  );
  background: linear-gradient(
    180deg,
    #ffd801,
    #ffd801 35%,
    #f5c037 0,
    #f5c037 50%,
    #f5a937 0,
    #f5a937 65%,
    #ea652c 0,
    #ea652c
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body {
  color: #47453d;
  font-size: @text14;
  line-height: 150%;
  padding: 50px 0;
  height: 100vh;
  /* background: #f5c037; */
  /* background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffd801),
    color-stop(25%, #ffd801),
    color-stop(25%, #f5c037),
    color-stop(50%, #f5c037),
    color-stop(50%, #f5a937),
    color-stop(75%, #f5a937),
    color-stop(75%, #ea652c),
    to(#ea652c)
  ); */
  /* background: linear-gradient(
    180deg,
    #ffd801,
    #ffd801 25%,
    #f5c037 0,
    #f5c037 50%,
    #f5a937 0,
    #f5a937 75%,
    #ea652c 0,
    #ea652c
  ); */
  background-image: url("@{waves}");
  background-color: #01bcff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

main {
  width: 1070px;
  height: calc(100vh - 100px);
  margin: 0 auto;
  grid-gap: 8px;
  gap: 8px;
  border: 8px solid @homeBackgroundColor;
  box-shadow: inset 0 0 0 1px @homeBackgroundColor;
  background: @homeBackgroundColor;
  border-radius: 25px;
  position: relative;
}

.content {
  background: #fffbec;
  border-radius: 17px;
  margin-left: 178px;
  position: relative;
  height: calc(100vh - 116px);
}

.footer-mountains {
  z-index: 10;
  position: absolute;
  bottom: 0;
  left: calc(50% + 225px);
  width: 415px;
  height: 157px;
  background: url(~@/assets/images/footer-mountains.svg) 0 bottom
    no-repeat;
  -webkit-clip-path: polygon(
    30.35% 19.95%,
    41.1% 45%,
    59% -5%,
    100% 100%,
    0 100%
  );
  clip-path: polygon(30.35% 19.95%, 41.1% 45%, 59% -5%, 100% 100%, 0 100%);
}

.uppercase {
  font-family: Oswald;
  font-weight: @fw4;
  font-size: @text16;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.font-inconsolata {
  font-family: Inconsolata, monospace;
  letter-spacing: 0 !important;
}

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  h3 {
    margin: 0 0 15px;
  }
  &.gap50 {
    grid-gap: 50px;
    gap: 50px;
  }
}

.padding-25-50 {
  padding: 25px 50px;
}

/* mobile端无滚动条(滚动区域为body -- 方便使用系统自带滚动条部件) */
@media (max-width: 823px) and (orientation: landscape),
  screen and (max-width: 900px) and (orientation: portrait) {
  .footer-mountains {
    display: none;
  }
  body {
    /* no-padding */
    /* padding: 8px; */
    padding-top: 0;
    padding-bottom: 0;
    background-image: none;
    background-color: transparent;
    height: 100%;
  }
  #app {
    height: 100%;
    border: 8px solid @homeBackgroundColor;
    box-shadow: inset 0 0 0 1px @homeBackgroundColor;
    background: @homeBackgroundColor;
    border-radius: 10px;
  }
  main {
    width: auto;
    display: block;
    /* no-padding */
    /* height: calc(100vh - 16px); */
    height: 100%;
    border: none;
  }
  .content {
    padding-top: 72px;
    margin-left: 0;
    /* no-padding */
    /* height: calc(100vh - 32px); */
    height: 100%;
  }
  /* content中的标题 -- h2标签 */
  h2 {
    padding: 40px 20px 20px;
    font-size: @text18;
  }
  .two-col-grid {
    display: block;
  }
  .padding-25-50 {
    padding: 20px;
  }
}

/* pc端自定义滚动条(滚动区域为div.content) */
@media (min-width: 823px) and (orientation: landscape),
  screen and (min-width: 900px) and (orientation: portrait) {
  .content {
    overflow-y: scroll;
  }
  .content::-webkit-scrollbar {
    /*滚动条整体样式*/
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 5px;
  }
  .content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    background: @homeBackgroundColor;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
    );
  }
  .content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
    margin: 10px 0;
  }
}
